<template>
  <div style="text-align: center">
    <el-form ref="form"
             :model="form"
             label-width="80px">
      <el-form-item label="手机号:" required>
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="新密码:" required>
        <el-input type="password" v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="验证码:" required style="position: relative">
        <el-input v-model="form.code"></el-input>
        <el-button class="code" type="primary" @click="getCode">获取</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="save">
      提交
    </el-button>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "ForgetPassword",
    data(){
      return{
        form:{
          phone:'',
          code:'',
          newPassword:''
        },
      }
    },
    methods:{
      getCode(){
        if(this.form.phone.length === 0){
          alert('请填写手机号！')
          return;
        }
        let params = {}
        params.phone = this.form.phone
        params.user = 'BUYER'

        axios.post('https://haotry.top/api/verify/changePasswordVerification',JSON.stringify(params),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data
          console.log(res)
          if(res.status === 200){
            alert('验证码已发送，注意查收！')
            console.log(data)
          }
        })
      },
      save(){
        axios.post('https://haotry.top/api/buyer/forgetPassword',JSON.stringify(this.form),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          console.log(res)
          let data = res.data
          if(data.status === 200){
            console.log(data)
            this.$message({
              type: 'success',
              message: '更换密码成功!'
            });
            this.$emit('cancelForget')
            this.$router.push('/login')
          }
          else if(data.status === 502){
            this.$message({
              type: 'info',
              message: '手机号未注册!'
            });
          }
          else{
            this.$message({
              type: 'info',
              message: '更新失败!'
            });
          }
        })
      }
    }
  }
</script>

<style scoped>
  .code{
    position: absolute;
    top: 0;
    right: 0;
  }
</style>